<template>
  <el-dialog
    ref="isVipDialog"
    v-model="dialogVisible"
    title="开通VIP会员"
    width="30%"
    :before-close="cancel"
  >
    <div class="content">
      <WarningFilled class="icon-WarningFilled" />
      <span> 查看完整数据，不浪费分上好大学</span>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleClose(true)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();

const router = useRouter();

const dialogVisible = ref(false);

const openDialog = () => {
  dialogVisible.value = true;
};

// 点击取消
const cancel = () => {
  dialogVisible.value = false;
  ElMessage({
    message: '已取消',
  });
};
// 点击确定
const handleClose = (val) => {
  if (val == true) {
    // 跳转到开通会员页面，应该是会员商品的详情
    router.push({
      path: '/shopserve/shopDet',
      query: {
        id: store?.getters.indexInfo.vipserviceid,
      },
    });
  } else {
    dialogVisible.value = false;
  }
};

defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: row;

  .icon-WarningFilled {
    width: 1.5em;
    height: 1.5em;
    color: var(--color-text);
  }
}
</style>
